<template>
    <el-form-item v-if="!field.hidden" :label="field.type !== 'switch' ? field.label : ''" :prop="field.prop">
        <el-select 
        v-if="field.type === 'select'" 
        :model-value="getNestedValue(formData, field.prop)"
        @update:model-value="(val) => setNestedValue(formData, field.prop, val)"
        v-bind="getFieldProps(field)">
        <el-option v-for="option in field.options" :key="option.value" :label="option.label" :value="option.value" />
        </el-select>

        <el-input-number 
        v-else-if="field.type === 'number'" 
        :model-value="getNestedValue(formData, field.prop)"
        @update:model-value="(val) => setNestedValue(formData, field.prop, val)" 
        :step="1" 
        :placeholder="getFieldProps(field).placeholder"
        controls-position="right"
        />

        <component 
        v-else
        :is="getFieldComponent(field.type)"
        :model-value="getNestedValue(formData, field.prop)"
        @update:model-value="(val) => setNestedValue(formData, field.prop, val)"
        v-bind="getFieldProps(field)"
        />
        
        <span v-if="field.type === 'switch'" class="switch-description">{{ field.label }}</span>
    </el-form-item>
  </template>
  
  <script setup lang="ts">
  import type { Component } from 'vue'
  import { defineProps, toRefs,  } from 'vue';
  import { ElMessage, FormInstance, FormRules, ElInput, ElInputNumber, ElSelect, ElSwitch, ElOption, ElFormItem } from 'element-plus'
  import { Connection } from '@/types/api/connection'
  import type { BaseFormField } from '@/types/api/database'
  import { FieldProps } from '@/types/connection'

  const props = defineProps({
    formData: {
      type: Object as () => Connection,
      required: true,
    },
    field: {
      type: Object,
      required: true,
    }
  });

  // 获取表单组件类型
  const getFieldComponent = (type: string): Component => {
    switch (type) {
      case 'password':    return ElInput
      case 'number':      return ElInputNumber
      case 'textarea':    return ElInput
      case 'select':      return ElSelect
      case 'switch':      return ElSwitch
      default:            return ElInput
    }
  }

  // 获取字段属性配置
  const getFieldProps = (field: BaseFormField): FieldProps => {
    const placeholderMsg = field.placeholder ? field.placeholder : field.label
    const props: FieldProps = {
      placeholder: '请输入' + placeholderMsg
    }
    switch (field.type) {
      case 'password':
        props.type = 'password'
        props.showPassword = true
        break
      case 'number':
        props.min = 1
        props.max = 65535
        break
      case 'textarea':
        props.type = 'textarea'
        props.rows = 3
        break
      case 'select':
        props.placeholder = '请选择' + placeholderMsg
        break
    }
    if (field.options) {
      props.options = field.options
    }
    return props
  }

  // 获取嵌套属性值
  const getNestedValue = (obj: any, path: string) => {
    return path.split('.').reduce((acc, part) => acc?.[part], obj)
  }

  // 设置嵌套属性值
  const setNestedValue = (obj: any, path: string, value: Object) => {
    const parts = path.split('.')
    const lastPart = parts.pop()!
    const target = parts.reduce((acc, part) => {
      if (!acc[part]) acc[part] = {}
      return acc[part]
    }, obj)
    target[lastPart] = value
  }
  </script>
  
  <style scoped>
  .switch-description {
    margin-left: 10px;      /* 添加左边距 */
    color: #606266;     /* 设置颜色 */
  }

  .el-input-number {
    width: 100%;            /* 设置为100%以适应父容器 */
  }
  ::v-deep .el-input__inner {
    text-align: left;       /* 设置文本左对齐 */
  }

  </style>